<template>
  <div class="wordAndCloudInfo">
    <div class="wordAndCloudInfoWrap">
      <div id="wordAndCloudChart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-wordcloud";

export default {
  data() {
    return {
      remark: [],
      newStudentId: "",
      myChart: null, // 用于存储 ECharts 实例
      techColors: [
        "#00BFFF", // 深天蓝
        "#1E90FF", // 道奇蓝
        "#4169E1", // 皇家蓝
        "#4682B4", // 钢青色
        "#5F9EA0", // 军蓝色
        "#20B2AA", // 浅海洋绿
        "#48D1CC", // 中绿宝石
        "#00CED1", // 深绿宝石
        "#7B68EE", // 中板岩蓝
        "#6A5ACD", // 板岩蓝
      ],
    };
  },
  props: ["studentId"],
  watch: {
    studentId: {
      immediate: true, // 立即触发一次
      handler(newValue) {
        if (newValue) {
          this.getRemarkInfo(newValue);
        }
      },
    },
  },
  mounted() {
    // 初始化图表
    this.$nextTick(() => {
      this.initChart();
      // 如果有 studentId，获取数据
      if (this.studentId) {
        this.getRemarkInfo(this.studentId);
      }
    });
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.dispose(); // 销毁 ECharts 实例
    }
  },
  methods: {
    initChart() {
      var chartDom = document.getElementById("wordAndCloudChart");
      if (!chartDom) {
        console.error('找不到图表容器元素');
        return;
      }
      if (this.myChart) {
        this.myChart.dispose();
      }
      this.myChart = echarts.init(chartDom);
      // 添加窗口大小变化的监听
      window.addEventListener('resize', () => {
        if (this.myChart) {
          this.myChart.resize();
        }
      });
    },
    getRemarkInfo(id) {
      this.$axios
        .get("/students/getRemarkInfoById/" + id)
        .then((res) => {
          let remarkArr = res.data.data;
          this.remark = remarkArr.map((item) => ({
            name: item,
            value: Math.floor(Math.random() * 100) + 10,
          }));
          this.dataChart();
        })
        .catch((error) => {
          console.error("获取学生信息失败:", error);
        });
    },
    dataChart() {
      if (!this.myChart) {
        this.initChart();
      }

      const techColors = this.techColors;

      var option = {
        series: [
          {
            type: "wordCloud",
            // 网格大小，各项之间间距
            gridSize: 15,
            // 形状 circle 圆，cardioid  心， diamond 菱形，
            // triangle-forward 、triangle 三角，star五角星
            shape: "circle",
            // 字体大小范围
            sizeRange: [10, 30],
            // 文字旋转角度范围
            rotationRange: [0, 0],
            // 旋转步值
            rotationStep: 90,
            // 自定义图形
            // maskImage: maskImage,
            left: null,
            top: null,
            right: null,
            bottom: null,
            // 画布宽
            width: "100%",
            // 画布高
            height: "100%",
            // 是否渲染超出画布的文字
            drawOutOfBound: false,
            // 启用高亮
            emphasis: {
              focus: 'self',
              scale: true,
              textStyle: {
                fontSize: 40,
                fontWeight: 'bold',
                shadowBlur: 10,
                shadowColor: "#2ac",
              }
            },
            textStyle: {
              color: () => {
                return techColors[parseInt(Math.random() * techColors.length)];
              }
            },
            data: this.remark,
          },
        ],
      };
      this.myChart.setOption(option);
    },
  },
};
</script>
<style scoped>
.wordAndCloudInfo {
  width: 100%;
  height: 50%;
  margin-top: 5%;
}

.wordAndCloudInfoWrap {
  display: flex;
  justify-content: center;
  flex-direction: row;
  background-color: rgba(255, 255, 255, 0);
  width: 100%;
  height: 100%;
}

#wordAndCloudChart {
  width: 100%;
  height: 100%;
  min-height: 30%;
}
</style>